<template>
  <div class="desktop-conrtainer">
    <ul class="grid-box" tag="transition-group" item-key="id">
      <li
        v-for="(item, index) in myArray"
        :class="['tab-item', { 'current-selected': index === selectedIndex }]"
        :key="index"
        draggable="true"
        @dragstart="dragstartHandle($event, index)"
        @drag="dragHandle($event, index)"
        @dragend="dragendHandle($event, index)"
        @dragenter="dragenterHandle($event, index)"
        @dragover="dragoverHandle($event, index)"
        @dragleave="dragleaveHandle($event, index)"
        @drop="dropHandle($event, index)"
        @dblclick="item.action"
      >
        <div class="icon-page">
          <jc-icon :name="item.icon" />
        </div>
        <span class="title">{{ item.title }}</span>
      </li>
    </ul>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

// import UseDark from '@/components/theme/UseDark.vue'
import { useDesktopStore } from './store'

const { selectedIndex, setSelectedIndex } = useDesktopStore()

// ----------------- [拖动目标上触发事件] -----------------
// 用户开始拖动元素时触发
function dragstartHandle(event: DragEvent, index: number) {}
// 元素正在拖动时触发
function dragHandle(event: DragEvent, index: number) {}
// 用户完成元素拖动后触发
function dragendHandle(event: DragEvent, index: number) {}

// ----------------- [释放目标时触发] -----------------
// 当被鼠标拖动的对象进入其容器范围内时触发此事件
function dragenterHandle(event: DragEvent, index: number) {
  const target = event.target as HTMLElement
  // setSelectedIndex(NaN)
  // target.classList.add('drag-enter')
}

// 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
function dragoverHandle(event: DragEvent, index: number) {}

// 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
function dragleaveHandle(event: DragEvent, index: number) {
  const target = event.target as HTMLElement
  target.classList.remove('drag-enter')
}

// 在一个拖动过程中，释放鼠标键时触发此事件
function dropHandle(event: MouseEvent, index: number) {
  const target = event.target as HTMLElement
  // target.classList.add('current-selected')
  // setSelectedIndex(index)
}

const myArray = ref<
  {
    index: number
    title: string
    icon: string
    action: (...params: any[]) => any
  }[]
>([])

for (let index = 1; index < 300; index++) {
  let icon = ''
  if (index % 3 === 0) {
    icon = 'study-color'
  } else if (index % 3 === 1) {
    icon = 'shopping-cart-full-color'
  } else {
    icon = 'system-v2-color'
  }
  myArray.value.push({
    index: index,
    title: `item ${index}`,
    icon: icon,
    action: () => {
      console.log(`item ${index}`)
    }
  })
}
</script>

<style lang="scss" scoped>
.desktop-conrtainer {
  background-color: #00451a;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  ul.grid-box {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(52px, 1fr));
    /* 子容器宽度固定为0，一行数量随父容器宽度改变 */
    grid-gap: 0; // 行间距
    justify-items: start; // 左侧对齐

    li.tab-item {
      height: 76px;
      list-style: none;
      white-space: nowrap;
      text-overflow: ellipsis;
      padding-top: 10px;
      padding-bottom: 10px;
      text-align: center;
      box-sizing: border-box;
      width: 52px;
      user-select: none;
      &:hover {
        cursor: pointer;
        background-color: rgba(255, 255, 255, 0.1);
      }

      &.drag-enter,
      &.current-selected {
        background-color: rgba(255, 255, 255, 0.1);
        border-style: solid;
        border-color: #a85151;
        border-width: 1px;
        border-radius: 3px;
      }

      .title {
        color: #dbdbdb;
        font-size: 12px;
        user-select: none;
      }
    }
  }
}
</style>
